<extend name="Include:Layout"/>
<block name="title">服务</block>
<block name="style">
<style>
.picker-button .iconfont{display:inline-block;width:30px;font-size:24px;}
#data-content{background:#fff;}
.pengyou{border-bottom:1px solid #ddd;}
.pengyou .cnt{padding:15px;font-size:14px;}
.avater-py img {width:100%;}
.pengyou .cnt .detail{}
.pengyou .cnt .name a{color:#6499b3;}
.pengyou .cnt p{line-height:18px;padding-bottom:5px;} 
.imglist img{width:100%;}
.tools{margin-top:10px;}
.tools .iconfont{display:inline-block;width:26px;height:26px;font-size:20px;float:left;} 
.time{font-size:12px;color:#999;}
</style>
</block>

<block name="main">
	<div class="weui_tab">
		<div class="weui_navbar">
			<div class="toolbar">
		        <div class="toolbar-inner">
		            <a href="javascript:;" class="picker-button open-popup" data-target="#adddata"><i class="icon iconfont"></i></a>
		            <h1 class="title" id="banji_title">教师天地</h1>
		        </div>
		    </div>
		</div>
		<div class="weui_tab_bd" id="content" style="margin-top:0px;background:#fff;">
			<div class="weui-pull-to-refresh-layer weui-pull-to-refresh">
			    <div class="pull-to-refresh-arrow"></div> <!-- 上下拉动的时候显示的箭头 -->
			    <div class="pull-to-refresh-preloader"></div> <!-- 正在刷新的菊花 -->
			    <div class="down">下拉刷新</div><!-- 下拉过程显示的文案 -->
			    <div class="up">释放刷新</div><!-- 下拉超过50px显示的文案 -->
			    <div class="refresh">正在刷新...</div><!-- 正在刷新时显示的文案 -->
			</div>
			<div id="data-content">

			</div>
			<div class="weui-infinite-scroll">
				<div class="infinite-preloader"></div>
			</div>
		</div>
		<php>$curbar = 3;</php>
    	<include file="Include:navbar" />
    </div>

<div id="adddata" class="weui-popup-container">
  	<div class="weui-popup-overlay"></div>
  	<div class="weui-popup-modal">
  		<div class="toolbar">
	        <div class="toolbar-inner">
	            <a href="javascript:;" class="picker-button close-popup">返回</a>
	            <h1 class="title" id="banji_title">发布状态</h1>
	        </div>
	    </div>
  		<form style="margin-top:44px;">
  			<div class="weui_cell">
	            <div class="weui_cell_bd weui_cell_primary">
	                <textarea class="weui_textarea" placeholder="请输入..." rows="3"></textarea>
	                <div class="weui_textarea_counter"><span>0</span>/200</div>
	            </div>
	        </div>
		    <div class="weui_cells weui_cells_form" style="margin-top:10px;">
		        <div class="weui_cell">
		            <div class="weui_cell_bd weui_cell_primary">
		                <div class="weui_uploader">
		                    <div class="weui_uploader_hd weui_cell">
		                        <div class="weui_cell_bd weui_cell_primary">图片上传</div>
		                        <div class="weui_cell_ft">0/2</div>
		                    </div>
		                    <div class="weui_uploader_bd">
		                        <ul class="weui_uploader_files">
		                            <li class="weui_uploader_file" style="background-image:url(http://shp.qpic.cn/weixinsrc_pic/pScBR7sbqjOBJomcuvVJ6iacVrbMJaoJZkFUIq4nzQZUIqzTKziam7ibg/)"></li>
		                            <li class="weui_uploader_file weui_uploader_status" style="background-image:url(http://shp.qpic.cn/weixinsrc_pic/pScBR7sbqjOBJomcuvVJ6iacVrbMJaoJZkFUIq4nzQZUIqzTKziam7ibg/)">
		                                <div class="weui_uploader_status_content">
		                                    <i class="weui_icon_warn"></i>
		                                </div>
		                            </li>
		                            <li class="weui_uploader_file weui_uploader_status" style="background-image:url(http://shp.qpic.cn/weixinsrc_pic/pScBR7sbqjOBJomcuvVJ6iacVrbMJaoJZkFUIq4nzQZUIqzTKziam7ibg/)">
		                                <div class="weui_uploader_status_content">50%</div>
		                            </li>
		                        </ul>
		                        <div class="weui_uploader_input_wrp">
		                            <input class="weui_uploader_input" type="file" accept="image/jpg,image/jpeg,image/png,image/gif" multiple="">
		                        </div>
		                    </div>
		                </div>
		            </div>
		        </div>
		    </div>
		    <div style="padding:15px;margin-top:30px;"><a href="javascript:;" class="weui_btn weui_btn_primary">发布</a></div>
  		</form>
  	</div>
</div>
<script type="text/html" id="data-tpl">
<div class="pengyou">
	<div class="cnt">
		<div class="weui-row">
	      	<div class="weui-col-15 avater-py"><img src="http://shp.qpic.cn/weixinsrc_pic/pScBR7sbqjOBJomcuvVJ6iacVrbMJaoJZkFUIq4nzQZUIqzTKziam7ibg/"></div>
	      	<div class="weui-col-85 detail">
	      		<p class="name"><a href="javascript:;">胡老师</a></p>
	      		<p class="text">这是文字这是文字这是文字</p>
	      		<div class="imglist">
	      			<div class="weui-row">
				      	<div class="weui-col-33"><img src="http://shp.qpic.cn/weixinsrc_pic/pScBR7sbqjOBJomcuvVJ6iacVrbMJaoJZkFUIq4nzQZUIqzTKziam7ibg/"></div>
				      	<div class="weui-col-33"><img src="http://shp.qpic.cn/weixinsrc_pic/pScBR7sbqjOBJomcuvVJ6iacVrbMJaoJZkFUIq4nzQZUIqzTKziam7ibg/"></div>
				      	<div class="weui-col-33"><img src="http://shp.qpic.cn/weixinsrc_pic/pScBR7sbqjOBJomcuvVJ6iacVrbMJaoJZkFUIq4nzQZUIqzTKziam7ibg/"></div>
				      	<div class="weui-col-33"><img src="http://shp.qpic.cn/weixinsrc_pic/pScBR7sbqjOBJomcuvVJ6iacVrbMJaoJZkFUIq4nzQZUIqzTKziam7ibg/"></div>
				    </div>
	      		</div>
	      		<p class="time">发布于 2016-09-09 11:11:11</p>
	      		<div class="tools">
	      			<div class="weui-row">
				      	<div class="weui-col-50">
				      		<i class="icon iconfont"></i>
				      		<a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_default">打赏</a>
				      	</div>
				      	<div class="weui-col-50">
				      		<i class="icon iconfont"></i>
				      		<a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_default">点赞</a>
				      	</div>
				     </div>
	      		</div>
	      	</div>
	    </div>
	</div>
	
</div>
</script>
</block>

<block name="script">
<js href="/Public/Assets/jqweui/dist/js/swiper.js" />
<script>
//监听下拉刷新
$("#content").pullToRefresh();
$("#content").on("pull-to-refresh", function() {
	load();	
});
var loading = false;  //状态标记
$(function () {
	//第一次加载数据
	load();
	
	//缴费记录
	$('#content').infinite();
	//$("#page_container").popup();
	
	$('#content').infinite().on("infinite", function() {
	  	if(loading) return;
	  	loading = true;
	  	load();
	});
	
});
function load(){
	$.showLoading("正在加载...");
	
	//$.get('',function(){
		setTimeout(function(){
			var html = '' ;
			var json = {};
			for(var i = 0 ; i < 10 ; i++){
				html += template('data-tpl',json);
			}
			$('#data-content').append(html);
			listen_img_click(); //图片点击事件监听
			$.hideLoading();
			$("#content").pullToRefreshDone();
			loading = false;
		},300);//模拟延时
		
	//});
}
function listen_img_click(){
	$('.imglist img').click(function(){
		var $parent = $(this).parent().parent();
		var index = $parent.find('img').index($(this)); //获取当前点击的是哪一张
		var $imglist = $parent.find('img');
		var items = [];
		$imglist.each(function(){
			items.push($(this).attr('src'));
		});
		
		var pb = $.photoBrowser({
			initIndex:index,  //从第几张开始
			items: items
		});
		pb.open();
	});
}
</script>
</block>